<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="box">
        <h1>{{name}}</h1>

           <!-- 
            v-model指令：可以让表单元素实现数据的双向绑定【页面+数据同步】
         -->
         文本框<input type="text" v-model="text">
         <hr>
         单选：
         <input type="radio" value="nan" v-model="sex">
         <input type="radio" value="nv" v-model="sex">
         <hr>
         复选：在通过数据双向绑定收集数据的时候，复选框用数组收集数据
         <input type="checkbox" value="eat" v-model="hobby">
         <input type="checkbox" value="drunk" v-model="hobby">
         <input type="checkbox" value="sleep" v-model="hobby">

         <hr>
          <!-- 
              下拉菜单:下拉菜单数据双向绑定的时候，给select进行绑定的
           -->
           <select v-model="city">
               <option value="bj">北京</option>
               <option value="sh">上海</option>
               <option value="zz">郑州</option>
               <option value="sz">深圳</option>
               <option value="hn">河南</option>
           </select>


           <!--    v-model:用户表单元素，非表单元素p、div、a、img等等不能使用 -->
           <!-- <p v-model="name"></p> -->

    </div>
</body>
</html> 
<script>
     //关联实例
    //上一节:学习数据的单向绑定,VM的属性值流向页面称之为单向绑定
    //这一节:v-model指令实现表单元素的数据双向绑定
    const vm = new Vue({
        el:'.box',
        data:{
            name:'小狗狗',
            text:'明天不用上课了',
            sex:'nv',
            hobby:['eat'],
            city:'bj'
        }
    })
</script>